const { defineConfig } = require('@vue/cli-service')
const Mock = require('mockjs')
const bodyParser = require('body-parser') // 转json中间件
const { list } = Mock.mock({
  // 属性 list 的值是一个数组，其中含有 40 个元素
  'list|40': [{
    // 属性 id 是一个自增数，起始值为 1，每次增 1
    'id|+1': 1,
    'image': '@image(200X200, @color)',
    'title': '@ctitle(3,50)',
    'price|1-100.1-2': 1
  }]
})
// 模拟分类数据
const { products } = Mock.mock({
  'products|50': [{
    'id|+1': 1,
    'classify': '@pick(["食品", "电器", "服装", "手机","零食"])',
    'title': '@ctitle(3,5)',
    'image': '@image(100X100, @color)',
  }]
})
/*
html,
body,
#app,
.big {
  width: 100%;
  height: 100%;
}
.big {
  display: flex;
  flex-direction: column;
}
.box {
  flex: 1;
  overflow: flex;
  overflow: auto;
  display: flex;
  flex-direction: column;
  .header {
    height: 50px;
  }
  .main {
    margin-top: 80px;
  }
  .ul {
    column-count: 2;
    li {
      break-inside: avoid;
    }
  }
}
  */
// 用来存储用户信息
const users = [
  { username: '张三', password: '123456' }
]
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    setupMiddlewares: (mid, dev) => {
      dev.app.use(bodyParser.json()) // 使用中间件： 转json格式-----post请求才需要
      // 列表接口
      // dev.app.get('/api/list', (req, res) => {
      //   res.send({
      //     code: 200,
      //     data: list,
      //     total: list.length
      //   })
      // })

      // 列表接口-携带参数(分页/上拉加载)
      dev.app.get('/api/list', (req, res) => {
        const { pagination, pageNum } = req.query
        res.send({
          code: 200,
          // pagination:1, pageNum:10   ---  0  1  2  3  4  5  6  7  8  9
          // pagination:2, pageNum:10   ---  10  11  12   ... 19
          data: list.slice((pagination - 1) * pageNum, pagination * pageNum), // (0,10)
          total: list.length
        })
      })
      // 详情接口
      dev.app.get('/api/detail', (req, res) => {
        const { id } = req.query
        res.send({
          code: 200,
          // id:1 
          // 从list数组中找出id是1的那个对象
          data: list.find(item => item.id == id) // find()操作方法： 找到数组中符合条件的第一个元素，返回该元素，未找到返回undefined
        })
      })
      // 搜索接口
      dev.app.get('/api/search', (req, res) => {
        const { value } = req.query
        res.send({
          code: 200,
          data: list.filter(item => item.title.includes(value))
        })
      })
      // 分类接口
      dev.app.get('/api/kind', (req, res) => {
        const { key } = req.query
        res.send({
          code: 200,
          data: products.filter(item => item.classify == key)
        })
      })
      // 注册接口
      dev.app.post('/api/register', (req, res) => {
        const { username, password } = req.body
        // 判断users数组中是否已存在该用户名
        // every()方法： 用于检测数组中所有元素是否满足条件，所有元素都满足返回true,只要一个元素不满足返回false
        const isAdd = users.every(item => item.username != username)
        if (isAdd) {
          // 该账号未注册
          users.push({
            username, // username:username,
            password // password:password
          })
          res.send({
            code: 200,
            message: '注册成功'
          })
        } else {
          // 该账号已注册
          res.send({
            code: 0,
            message: '该账号已经注册了'
          })
        }
      })
      // 登录接口
      dev.app.post('/api/login', (req, res) => {
        const { username, password } = req.body
        // 判断传过来的账号密码是否在users数组中
        const user = users.find(item => item.username == username && item.password == password) //  find(): 找数组中符合条件的第一个元素，找到返回该元素，找不到返回undefined
        if (user) {
          // 说明账号密码输入正确
          res.send({
            code: 200,
            message: '登录成功',
            token: Mock.Random.guid() // 生成一个随机的token
          })
        } else {
          // 说明账号密码输入错误
          res.send({
            code: 0,
            message: '账号或密码错误，请重新输入'
          })
        }
      })

      return mid
    }
  }
})

